<template>
    <view class="home-nav">
        <view
            class="nav-item"
            :style="{ width: getWidth }"
            v-for="(item, index) in list"
            :key="index"
            @click="itemClick(item)"
        >
            <image
                class="h-[100rpx] w-[100rpx] mb-[15rpx]"
                :src="getUrl(item['icon'])"
                mode="scaleToFill"
            />
            <view>
                <u-text mode="info" :text="item['name']"></u-text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "@/hooks/useRoute";
import { getUrl } from "@/utils/common";

interface navItem {
    icon: string;
    link?: string;
    name?: string;
}

interface styleType {
    service_count?: {
        // 导航每行数量
        type: Number;
        default: () => 4;
    };
}

const props = defineProps<{
    list: {
        //列表数据
        type: navItem;
        default: () => [];
    };
    style: {
        //列表样式
        type: styleType;
        default: () => {};
    };
}>();

const getWidth = computed(() => {
    switch (props.style["service_count"]) {
        case 3:
            return "33.333%";
        case 4:
            return "25%";
        case 5:
            return "20%";
        default:
            return "25%";
    }
});

//点击导航跳转页面
const itemClick = (item) => {
    let link = item?.link || "";
    if (link) useRoute().jumpTo({ url: link });
};
</script>

<style lang="scss" scoped>
.home-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.nav-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: 30rpx 0;
}

.nav-item.active {
    color: #ff3333;
    border-bottom-color: #ff3333;
}
</style>
